<template>
	<div class="header">
		<div class="logo"><img src="../assets/images/logo.png" alt=""></div>
		<el-menu :default-active="$route.path" :router="true" class="el-navbar" mode="horizontal" @select="handleSelect">
			<el-menu-item index="/"><i class="iconfont icon-shouye"></i><span>首页</span></el-menu-item>
			<el-menu-item index="/dc-page" :class="{activem:$route.name=='dc-page'}"><i class="iconfont icon-dc"></i><span>单词优化</span></el-menu-item>
			<el-menu-item index="/zz-page" :class="{activem:$route.name=='zz-page'}"><i class="iconfont icon-zz"></i><span>整站优化</span></el-menu-item>
			<el-menu-item index="/cw-page" :class="{activem:$route.name=='cw-page'}"><i class="iconfont icon-caiwuzhongxin"></i><span>财务中心</span></el-menu-item>
			<el-menu-item index="/hp-page"><i class="iconfont icon-bangzhu1"></i><span>帮助中心</span></el-menu-item>
			<el-menu-item index="/uc-page" :class="{activem:$route.name=='uc-page'}"><i class="iconfont icon-gr"></i><span>个人中心</span></el-menu-item>
			<el-menu-item index="/yq-page"><i class="iconfont icon-liwu"></i><span>邀请返现</span></el-menu-item>
		</el-menu>
		<div class="ht-right">
			<el-button type="text" class="ht-icon">
				<i class="iconfont icon-message"></i><span class="dot"></span>
			</el-button>
			<el-dropdown placement="bottom">
				<div class="el-dropdown-uc">
					<img src="../assets/images/avatar.png" alt=""><span class="uc-name">徐_xu</span><i class="el-icon-caret-bottom el-icon--right"></i>
				</div>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>下拉菜单</el-dropdown-item>
					<el-dropdown-item>下拉菜单</el-dropdown-item>
					<el-dropdown-item>下拉菜单</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<el-button type="text" class="ht-icon">
				<i class="iconfont icon-tc"></i>
			</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Head',
		data() {
			return {
				activeIndex: '1',
				navinput: ''
			};
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>
<style scoped="scoped">
	.header{
		position: fixed;
		background-color: #FFFFFF;
		height: 52px;
		width: 100%;
		top: 0;z-index: 9999;
		padding: 0 20px;
		box-shadow: 0 0 12px rgba(164,169,184,.1);
	}
	.logo{
		float: left;
		font-size: 0;
		padding: 10px 0;
	}
	.el-navbar{
		float: left;
		margin-left: 36px;
		border-bottom: 0!important;
	}
	.ht-right{
		float: right;
		height: 52px;
		display: flex;
		align-items: center;
	}
	.el-navbar .el-menu-item{
		height: 52px;
		line-height: 52px;
		padding: 0;
		margin-right: 50px;
	}
	.el-navbar .el-menu-item *{
		display: inline-block;
		vertical-align: middle;
	}
	.el-navbar .el-menu-item .iconfont{
		margin-right: 8px;
	}
	.ht-icon{
		position: relative;
		border: 0;
		width: 32px;
		height: 32px;
		line-height: 32px;
		padding: 0;
		cursor: pointer;
		color: #283b58;
	}
	.ht-icon .iconfont{
		font-size: 20px;
	}
	.el-dropdown-uc{
		height: 32px;
		margin: 0 30px;
		cursor: pointer;
	}
	.el-dropdown-uc *{
		display: inline-block;
		vertical-align: middle;
	}
	.el-dropdown-uc img{
		width: 32px;
		height: 32px;
		margin-right: 10px;
		border-radius: 32px;
	}
	.el-dropdown-uc .uc-name{
		width: 60px;
		color: #333333;
		font-size: 15px;
	}
	.el-dropdown-uc .el-icon--right{
		color: #a9afb2;
		font-size: 14px;
	}
	.ht-icon .dot{
		position: absolute;
		right: 3px;
		top: 3px;
		width: 10px;
		height: 10px;
		background-color: #409fff;
		border-radius: 5px;
		position: absolute;
		border: 2px solid #ffffff;
		box-shadow: 0 2px 9px #a3c5ff;
	}
	.el-navbar>.el-menu-item.is-active,
	.el-navbar>.el-menu-item.is-active:hover,
	.el-navbar>.el-menu-item.is-active:focus{
		color: #3a83ff;
		border-bottom: 3px solid #3a83ff;
	}
	
	.el-navbar>.el-menu-item.activem,
	.el-navbar>.el-menu-item.activem:hover,
	.el-navbar>.el-menu-item.activem:focus{
		color: #3a83ff!important;
		border-bottom: 3px solid #3a83ff!important;
	}
	.el-navbar>.el-menu-item.activem *{
		color: #3a83ff!important;
	}
	
	
	
</style>


